/*------------------------------------*\

    @Forms

\*------------------------------------*/

//
// Address Firefox 4+ setting `line-height` on `input` using `!important` in
// the UA stylesheet.
//

input {
	line-height: normal;
	outline: 0;
}

//
// It's recommended that you don't attempt to style these elements.
// Firefox's implementation doesn't respect box-sizing, padding, or width.
//
// 1. Address box sizing set to `content-box` in IE 8/9/10.
// 2. Remove excess padding in IE 8/9/10.
//

input[type="checkbox"],
input[type="radio"] {
	box-sizing: border-box; /* 1 */
	padding: 0; /* 2 */
}

//
// Fix the cursor style for Chrome's increment/decrement buttons. For certain
// `font-size` values of the `input`, it causes the cursor style of the
// decrement button to change from `default` to `text`.
//

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
	height: auto;
}

//
// 1. Address `appearance` set to `searchfield` in Safari and Chrome.
// 2. Address `box-sizing` set to `border-box` in Safari and Chrome
//    (include `-moz` to future-proof).
//

input[type="search"] {
	-webkit-appearance: textfield; /* 1 */
	.box-sizing(border-box);
}

//
// Remove inner padding and search cancel button in Safari and Chrome on OS X.
// Safari (but not Chrome) clips the cancel button when the search input has
// padding (and `textfield` appearance).
//

input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
	-webkit-appearance: none;
}

//
// Define consistent border, margin, and padding.
//

fieldset {
	// border: 1px solid #c0c0c0;
	border: none;
	margin: 0 2px;
	padding: 0.35em 0.625em 0.75em;
}

//
// 1. Correct `color` not being inherited in IE 8/9/10/11.
// 2. Remove padding so people aren't caught out if they zero out fieldsets.
//

legend {
	border: 0;
	padding: 0;
}

label {
	font-weight: @font-family-weight;
	font-family: inherit;
	display: inline-block;
	margin-bottom: @baseline-size / 10;
}

input[type="checkbox"],
input[type="radio"] {
	.box-sizing(border-box);
}

// Styling the placeholder for inputs
input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
	color: @base-color-ccc;
	font-size: inherit;
	font-family: @primary-font;
}

textarea {
	height: auto;
	resize: none;
}

input[type="radio"],
input[type="checkbox"] {
	margin-top: 1px \9;
	*margin-top: 0;
	line-height: normal;
}

select {
	vertical-align: middle;
}




// contains all form related classes
.form-group {
	vertical-align: middle;
	position: relative;
	.rem(margin-bottom, 16);
}

  // Use this class for appended input fields
.form-element-group,
.form-element-group-lg,
.form-element-group-sm {
	display: inline-table;
	vertical-align: middle;
	position: relative;
	border-collapse: separate;
	// .rem(margin-bottom, 16);
}

.form-group::before, .form-group::after,
.form-element-group::before, .form-element-group::after {
	clear: both;
	display: table;
	content: ""
}

// Add this class to all input elements
// input, checkbox, textarea, etc
input:not([type]), input[type="text"], input[type="password"], textarea {
	background-color: @base-bg;
	display: inline-block;
	// width: 100%;
	// font-size: @baseline-size;
	font-weight: @font-family-weight;
	line-height: @base-line-height;
	.border-radius(@border-radius);
	// .left-float;
	color: @base-color-777;
	vertical-align: middle;
	font-family: @primary-font;
	padding: @base-padding-vertical @base-padding-horizontal;
	border: 1px solid @base-color-ccc;
	outline: 0;
	-webkit-appearance: none;
	-webkit-transition: border linear 0.25s, box-shadow linear 0.25s;
	 -moz-transition: border linear 0.25s, box-shadow linear 0.25s;
	   -o-transition: border linear 0.25s, box-shadow linear 0.25s;
	      transition: border linear 0.25s, box-shadow linear 0.25s;
}

.form-element {
	background-color: @base-bg;
	display: block;
	width: 100%;
	// font-size: @baseline-size;
	font-weight: @font-family-weight;
	line-height: @base-line-height;
	.border-radius(@border-radius);
	// .left-float;
	color: @base-color-777;
	vertical-align: middle;
	font-family: @primary-font;
	padding: @base-padding-vertical @base-padding-horizontal;
	border: 1px solid @base-color-ccc;
	outline: 0;
	-webkit-appearance: none;
	-webkit-transition: border linear 0.25s, box-shadow linear 0.25s;
	 -moz-transition: border linear 0.25s, box-shadow linear 0.25s;
	   -o-transition: border linear 0.25s, box-shadow linear 0.25s;
	      transition: border linear 0.25s, box-shadow linear 0.25s;
}


// Adds a background color on disabled form-elements
.form-element.is-disabled {
	background-color: @base-color-eee;
}

//Form Element Lg -
.form-element-lg,
.form-element-lg > .form-element,
.form-element-lg > .form-element-extra,
.form-element-group-lg > .form-element,
.form-element-group-lg > .form-element-extra,
.form-element-group-lg > .form-group-btn:first-child > .btn,
.form-element-group-lg > .form-group-btn:last-child > .btn {
	padding: @base-padding-lg-vertical @base-padding-lg-horizontal;
	line-height: @line-height-lg;
	font-size: @btn-font-size-lg;
}

//
.form-element-lg > .form-element.btn-pill,
.form-element-lg > .form-element-extra.btn-pill,
.form-element-group-lg > .form-element.btn-pill,
.form-element-group-lg > .form-element-extra.btn-pill,
.form-element-lg > .form-group-btn:first-child > .btn.btn-pill,
.form-element-lg > .form-group-btn:last-child > .btn.btn-pill
.form-element-group-lg > .form-group-btn:first-child > .btn.btn-pill,
.form-element-group-lg > .form-group-btn:last-child > .btn.btn-pill {
	.border-radius(@border-radius * 10);
}

.form-element-sm,
.form-element-sm > .form-element,
.form-element-sm > .form-element-extra,
.form-element-group-sm > .form-element,
.form-element-group-sm > .form-element-extra,
.form-element-sm > .form-group-btn:first-child > .btn,
.form-element-sm > .form-group-btn:last-child > .btn
.form-element-group-sm > .form-group-btn:first-child > .btn,
.form-element-group-sm > .form-group-btn:last-child > .btn{
	padding: (@base-padding-sm-vertical / 1.75) @base-padding-sm-horizontal;
	line-height: @line-height-sm;
	font-size: @btn-font-size-sm;
}

// This is the design details on :focus
.form-element:focus, input[type="text"]:focus, textarea:focus {
	outline: 0;
	outline: thin dotted \9;
	// border-color: rgb(36,202,188);
	// .box-shadow(0 0 4px rgba(36,202,188, .6));
	border-color: rgb(156, 213, 245);
	.box-shadow(0 0 2px rgba(156, 213, 245, .6));
}

.form-element-extra,
.form-group-extra,
.form-group-btn {
	display: table-cell;
}

// This is the add-on in the front or back if input groups
.form-element-extra {
	// background-color: @base-color-eee;
	.gradient(@base-color-ccc, @base-off-white, @base-white);
	border: 1px solid @base-color-ccc;
	padding: @base-padding-vertical @base-padding-horizontal * 0.8;
	vertical-align: middle;
	font-family: @primary-font;
	.text-center;
	vertical-align: middle;
	// z-index: @zindex-1000;
	display: table-cell;
	white-space: nowrap;
	width: 1%;
}

.form-element-group > .form-element-extra:first-child,
.form-element-group-lg > .form-element-extra:first-child,
.form-element-group-sm > .form-element-extra:first-child,
.form-element-group > .btn-group > .btn:first-child,
.btn-group > .btn:first-child,
.btn-group-lg > .btn:first-child,
.btn-group-sm > .btn:first-child,
.form-element-group > .btn-group-lg > .btn:first-child,
.form-element-group > .form-group-btn:first-child > .btn,
.form-element-group-lg > .form-group-btn:first-child > .btn,
.form-element-group-lg > .form-element-extra:first-child,
.form-element-group-lg > .btn-group > .btn:first-child,
.form-element-group-lg > .btn-group-lg > .btn:first-child,
.pagination > ul > li:first-child > .btn,
.pagination > ul > li:first-child {
	border-top-left-radius: @border-radius;
	border-bottom-left-radius: @border-radius;
	margin-left: 1px;
}

.form-element-group > .form-element-extra:last-child,
.form-element-group-lg > .form-element-extra:last-child,
.form-element-group-sm > .form-element-extra:last-child,
.form-element-group > .form-group-btn:last-child > .btn,
.form-element-group-lg > .form-group-btn > .btn,
.form-element-group-sm > .form-group-btn > .btn,
.btn-group > .btn:last-child,
.btn-group > .btn:last-child,
.btn-group-lg > .btn:last-child,
.btn-group-sm > .btn:last-child,
.pagination > ul > li:last-child > .btn,
.pagination > ul > li:last-child {
	border-top-right-radius: @border-radius;
	border-bottom-right-radius: @border-radius;
}

.form-element-group > .form-element-extra:last-child,
.form-element-group-lg > .form-element-extra:last-child,
.form-element-group-sm > .form-element-extra:last-child,
.pagination > ul > li:last-child,
.pagination > ul > li:last-child > .btn {
	border-left: 0;
}

.form-element-group .form-element:last-child,
.form-element-group-lg .form-element:last-child,
.form-element-group-sm .form-element:last-child,
.form-element-element > .form-group-btn:last-child > .btn,
.form-element-group > .form-group-btn > .btn,
.form-element-group-lg > .form-group-btn > .btn,
.form-element-group-sm > .form-group-btn > .btn {
	border-top-left-radius: 0;
	border-bottom-left-radius: 0;
	margin-left: -1px;
}

.form-element-group .form-element:first-child,
.form-element-group-lg .form-element:first-child,
.form-element-group-sm .form-element:first-child,
.form-group-btn:first-child > .btn,
.form-element-group-btn:first-child > .btn {
	border-top-right-radius: 0;
	border-bottom-right-radius: 0;
	margin-right: -1px;
}

.form-group-extra,
.form-group-btn {
	width: 1%;
	vertical-align: middle;
	white-space: nowrap;
}

.form-group-btn > button > i:before {
	margin: 0;
}

// has icon
.has-icon {
	display: block;
}

.has-icon > .fa {
	position: relative;
	right: 0;
	vertical-align: middle;
	margin-right: 1rem;
	margin-top: .775rem;
	float: right;
	top: -2.45rem;
}